<template>
	<view class="bg">
		<xl-navbar title="Tabs 标签" fixed shadow></xl-navbar>
		
		<!-- 默认样式，有阴影，居左，当前下划线 -->
		<view class="title">基础样式，设置名称列表</view>
		<xl-tabs :tabList="['首页','组件','工具','模版']" :cur="cur"></xl-tabs>
		
		<!-- 如果对象显示字段不是默认的name、dot、badge，则可以用nameProp、dotProp、badgeProp属性设置 -->
		<view class="title">设置对象列表（name、dot、badge徽标属性）</view>
		<xl-tabs :cur="curTab" :tabList="categories"></xl-tabs>
		
		<!-- 背景颜色可以是纯色：#0a93ff，也可以是渐变：linear-gradient，也可以是透明：transparent -->
		<view class="title">字体颜色，当前字体颜色、背景颜色</view>
		<xl-tabs 
			:cur="curTab" 
			:tabList="categories"
			color="#ffffff"
			currentColor="#f7fe22"
			background="linear-gradient(180deg, rgb(147, 224, 255), rgb(43, 107, 255))"
			:padding="0"
		></xl-tabs>
		
		<view class="title">字体大小、两边留白、Tab宽高间隙</view>
		<xl-tabs
			:tabList="categories"
			currentColor="#0a93ff"
			:fontSize="16"
			:tabWidth="40"
			:tabHeight="60"
			:padding="30"
			:tabPadding="20"
		></xl-tabs>
		
		<!-- 当前下划线样式，设置宽、高，下划线和字之间的间距用lineBottom控制 -->
		<view class="title">当前下划线样式，设置宽、高，字间距</view>
		<xl-tabs 
			:cur="curTab" 
			:tabList="categories"
			:lineWidth="10"
			:lineHeight="4"
			:lineBottom="4"
		></xl-tabs>
		
		<!-- 当前放大样式，默认下划线 -->
		<view class="title">当前放大样式，默认下划线</view>
		<xl-tabs 
			:cur="curTab" 
			:tabList="categories"
			currentType="bigger"
			currentColor="#0a93ff"
		></xl-tabs>
		
		<!-- 当前box样式，默认下划线 -->
		<view class="title">当前box样式，默认下划线</view>
		<xl-tabs 
			:tabList="categories" 
			currentType="box"
			currentColor="#ffffff"
		></xl-tabs>
		
		<!-- 当前气泡样式，默认下划线 -->
		<view class="title">当前气泡样式，默认下划线</view>
		<xl-tabs
			:tabList="categories"
			currentType="bubble"
			bubbleColor="#efd0b1"
			:bubbleHeight="23"
			currentColor="#ffffff"
			:tabPadding="5"
			:fontSize="13"
		></xl-tabs>

		
		<!-- 布局layout属性 -->
		<view class="title">居中布局（tab数不多时)</view>
		<xl-tabs :tabList="['首页','组件','工具','模版']" layout="center"></xl-tabs>
		
		<!-- 布局layout属性 -->
		<view class="title">平分布局（tab数不多时)</view>
		<xl-tabs :tabList="['首页','组件','工具','模版']" layout="share"></xl-tabs>
		
		<view class="title">Cart卡片类型（tab数不多时)</view>
		<xl-tabs 
			:tabList="categories2"
			:padding="15"
			type="cart"
			color="#ffffff"
			background="#77d9fe"
		></xl-tabs>
		
		<!-- 设置toScroll属性为true，切换Tab时，会滚动至历史位置 -->
		<view class="title">切换Tab，滚到当前Tab历史滚动位置</view>
		<xl-tabs :tabList="['首页','组件','工具','模版']" toScroll></xl-tabs>
		
		<!-- 如果要修改图标，可以使用rightIcon，默认是xl-liebiao -->
		<view class="title">开启右侧按钮</view>
		<xl-tabs :tabList="categories" rightButton @clickRightButton="clickRightButton"></xl-tabs>
		
		<view class="title">Tabs组件触发函数</view>
		<xl-tabs 
			:tabList="categories" 
			@load="load"
			@tabChange="tabChange"
			@scroll="scroll"
			@reachBottom="reachBottom"
		></xl-tabs>
		
		<view class="title">Tabs组件提供的调用方法</view>
		<xl-tabs ref="tabs" :cur="curTab" :tabList="categories"></xl-tabs>
		<view class="flex-around">
			<xl-button text="切换Tab" type="primary" margin="10" @click="changeTab"></xl-button>
			<xl-button text="刷新Tab" type="primary" margin="10" @click="refreshTab"></xl-button>
		</view>
		
		<!-- 滑动切换，需要固定Tab内容的高度，不固定Tabs会跳，高度可以直接通过fixedHeight设置，单位为rpx -->
		<view class="title">滑动切换，会固定窗口高度</view>
		<xl-tabs :tabList="categories" switchType="swiper" :fixedHeight="500">
			<template v-slot:tabBox="{item}">
				<view>{{item.name}}</view>
			</template>
		</xl-tabs>
		
		<!-- 滑动切换，需要固定Tab内容的高度，不固定Tabs会跳，高度可以直接通过窗口高度减去reduceHeight，单位为rpx -->
		<view class="title">滑动切换，窗口相减设置高度</view>
		<xl-tabs :tabList="categories" switchType="swiper" :reduceHeight="500">
			<template v-slot:tabBox="{item}">
				<view>{{item.name}}</view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
			</template>
		</xl-tabs>
		
		<view class="title">滑动切换，面板全部显示才能滚动</view>
		<xl-tabs :tabList="categories" switchType="swiper" needFullScroll :reduceHeight="500">
			<template #tabBox="{item}">
				<view>{{item.name}}</view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
				<view style="width: 300rpx;height:300rpx;background: #0a93ff;margin-bottom:10px;"></view>
			</template>
		</xl-tabs>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	let cur = ref(uni.$xl.router.params.cur ? parseInt(uni.$xl.router.params.cur) : 0)
	
	let curTab = ref(3)
	const categories = [
		{name: '首页', type: '0'}, 
		{name: '组件', type: '1'}, 
		{name: '工具', type: '2', dot: true}, 
		{name: '模版', type: '3'}, 
		{name: '资源', type: '4', badge: 3}, 
		{name: 'API', type: '5'}, 
		{name: '指南', type: '6'}, 
		{name: '文档', type: '7'}
	]
	
	const categories2 = [
		{name: '首页', type: '0'}, 
		{name: '组件组件', type: '1', badge: 3}, 
		{name: '工具', type: '2', dot: true}, 
		{name: '模版', type: '3'}
	]
	
	function clickRightButton(index){
		uni.$xl.toast("点击rightBtn，当前Tab："+index)
	}
	
	function load(index){
		uni.$xl.toast("触发初始化加载，加载Tab："+index)
	}
	
	function tabChange(index){
		uni.$xl.toast("触发点击Tab事件，点击Tab："+index)
	}
	
	// 切换模式为swiper时生效
	function scroll(index, scrollTop){
		console.log("触发滚动事件，当前tab："+index + "，scrollTop："+scrollTop)
	}
	
	function reachBottom(index){
		uni.$xl.toast("Tab触底事件，当前tab："+index)
	}
	
	const tabs = ref()
	function changeTab(){
		// 切换至第五个Tab，
		tabs.value.changeTab(4)
		// 可以再次触发tabChange事件，默认不触发，若要出发设置第二个参数为true
		// tabs.value.changeTab(4, true)
		// 可以不进行过渡动画直接跳转，第三个参数设置为false，默认为true过渡动画
		// tabs.value.changeTab(4, false, false)
	}
	
	function refreshTab(){
		// 刷新当前tab内容，会触发load事件，在load中可以重新加载内容，注意不会跳转
		// tabs.value.refreshTab()
		// 也可以直接刷新第几个Tab，注意不会跳转
		tabs.value.refreshTab(4)
	}
	
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	page {
		background-color: #f9f9f9;
	}
	/* #endif */
	.bg{
		background-color: #f9f9f9;
	}
</style>